<template>
  <a-modal
    title="上传文件"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="流程类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="showable"
            placeholder="请输入"
            v-decorator="['typeKey', {rules: [{required: true, message: 'typeKey'}]}]" />
        </a-form-item>
        <a-form-item
          label="上传文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-upload
            name="file"
            :multiple="true"
            :action="url"
            :headers="headers"
            @change="handleChange"
            :data="data"
            :beforeUpload="beforeUpload"
            :showUploadList="false"
          >
            <a-button> <a-icon type="upload" />点击上传</a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
    <template slot="footer" >
      <div>
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">完成</a-button>
      </div>
    </template>
  </a-modal>

</template>

<script>
import AFormItem from 'ant-design-vue/es/form/FormItem'
import { mapGetters } from 'vuex'
export default {
  name: 'CarDouAddOrUpdate',
  components: { AFormItem },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      editable: false,
      addable: false,
      showable: false,
      type: 'add',
      url: process.env.VUE_APP_API_BASE_URL + '/models/add',
      headers: {
        'Authorization': 'Bearer' + this.token()
      },
      data: {
        typeKey: '123'
      }
    }
  },
  methods: {
    ...mapGetters(['token']),
    // 获取信息
    open () {
      this.visible = true
      const { form: { resetFields } } = this
      resetFields()
    },
    // 结束保存信息
    handleOk () {
      this.$emit('ok')
      this.visible = false
    },
    beforeUpload () {
      const typeKey = this.form.getFieldValue('typeKey')
      const flag = !typeKey
      if (flag) {
        this.$message.error('请输入流程类型')
      }
      this.data.typeKey = typeKey
      return !flag
    },
    handleCancel () {
      this.visible = false
      setTimeout(() => {
        this.addable = false
        this.showable = false
        this.editable = false
      }, 200)
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 成功`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 失败`)
      }
    }
  }
}
</script>

<style scoped>

</style>
